<style>
    #search-wrapper{
        margin-bottom: 20px;
    }
</style>
<div class="layui-layout statistic-wrapper" style="padding:0 20px;">
    {{/*<div id="search-wrapper">*/}}
        {{/*<div class="layui-form">*/}}
            {{/*<div class="layui-row">*/}}
                {{/*<div class="layui-inline">*/}}
                    {{/*<div class="layui-input-inline">*/}}
                        {{/*<input type="text" id="start_time" name="start_time"  placeholder="请输入开始时间" class="layui-input">*/}}
                    {{/*</div> 至*/}}
                    {{/*<div class="layui-input-inline">*/}}
                        {{/*<input type="text" id="end_time" name="start_time"  placeholder="请输入结束时间" class="layui-input">*/}}
                    {{/*</div>*/}}
                {{/*</div>*/}}
                {{/*<div class="layui-inline">*/}}
                    {{/*<button class="layui-btn search" data-type="reload">搜索</button>*/}}
                {{/*</div>*/}}
            {{/*</div>*/}}
        {{/*</div>*/}}
    {{/*</div>*/}}
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="layui-tab layui-tab-brief" lay-filter="tab">
        <ul class="layui-tab-title">
            <li class="layui-this" data-url="/tropism/table?con=clicks">平均点击数</li>
            <li data-url="/tropism/table?con=users">平均用户数</li>
        </ul>
        <div class="layui-tab-content"></div>
    </div>
    <div id="countPie" style="width: auto;height:280px;"></div>
    <div id="countChart" style="width: auto;height:400px;"></div>
</div>
<script src="{{.static_url}}/static/js/echarts.common.min.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element;
        element.on('tab(tab)', function(data){
            console.log($(this).attr("data-url")); //当前Tab标题所在的原始DOM元素
            getData($(this).attr("data-url"));
           // console.log(data.index); //得到当前Tab的所在下标
            //console.log(data.elem); //得到当前的Tab大容器
        });
    });
    // var start = "";
    // var end = "";
    var xData = "";
    var seriesName = "";
    var pieLegend = "";
    var pieData = "";
    // var sums = "";
    // var commonSums = "";
    // var vipSums = "";
    $(function () {
        getData('/tropism/table?con=clicks');
    });

    function getData(url) {
        $.ajax({
            url:url,
            type:'get',
            success:function (data) {
                if (data.code == 0){
                    console.log(data.data);
                    xData = data.data.xData;
                    seriesData = data.data.yData;
                    seriesName = data.data.name;
                    pieLegend = data.data.pieLegend;
                    pieData = data.data.pieData;
                    initChart();
                }
            }
        });
    }

    function initChart() {
        // 基于准备好的dom，初始化echarts实例
        var countChart = echarts.init(document.getElementById('countChart'));

        // 指定图表的配置项和数据
        var countOption = {
            //提示框组件
            tooltip: { },
            //图例
            legend: {},

            //横轴
            xAxis: {
                data: xData
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    type: 'bar',
                    // name: seriesName,
                    data: seriesData
                }
            ],
            label:{
                show:true,
                position:'top',
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        countChart.setOption(countOption);

        // 使用刚指定的配置项和数据显示图表。
        countChart.setOption(countOption);


        // 基于准备好的dom，初始化echarts实例
        var sumChart = echarts.init(document.getElementById('countPie'));

        // 指定图表的配置项和数据
        var sumOption = {
            title : {
                // text: '某站点用户访问来源',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: pieLegend
            },
            series : [
                {
                    name: seriesName,
                    type: 'pie',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}: {c}({d}%)'
                        }
                    },
                    data:pieData,
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        sumChart.setOption(sumOption);
    }

</script>